<template>
  <view class="template-news tn-safe-area-inset-bottom">

    <view class="tn-navbg" :style="{ height: vuex_custom_bar_height + 'px' }">
      <!-- 顶部自定义导航 -->
      <tn-nav-bar fixed alpha customBack>
        <view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
          <text class='icon tn-icon-left'></text>
          <text class='icon tn-icon-home-capsule-fill'></text>
        </view>
      </tn-nav-bar>
    </view>

    <view class="tn-margin-top-xs" :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
      <view class="nav_title--wrap">
        <view class="nav_title tn-cool-bg-color-6">
          Mount Qomolangma
        </view>
      </view>


      <view class="news-img tn-padding">
        <image src='/static/DIV1.png' mode='widthFix' class=''></image>

        <view>
          Mount Qomolangma is located in the middle of the the Himalayas. [33] The mountain body is a huge pyramid, and
          the terrain is extremely steep. The height of the snow line is 5800-6200 meters on the north slope and
          5500-6100 meters on the south slope. The Northeast Ridge, Southeast Ridge, and West Mountain Ridge are
          sandwiched by three steep cliffs (North, East, and Southwest), and 548 continental glaciers are distributed
          between these ridges and cliffs, with a total area of 1457.07 square kilometers and an average thickness of
          7260 meters. The north and south slopes of Mount Everest are mostly covered with ice and snow below 7500
          meters, while the north and southwest slopes are mostly covered with gravel above 7500 meters. At an altitude
          of 7500 meters, the coldest month is January with an average temperature of -36 ℃, and the hottest month is
          July with an average temperature of -19 ℃
        </view>
      </view>


    </view>

    <view class="tn-margin-top tn-padding-top-sm tn-margin-bottom">
      <view class="see">

        <view class="justify-content-item tn-flex tn-flex-col-center">
          <view style="margin-right: 10rpx;margin-left: 30rpx;">
            <tn-avatar-group :lists="groupList" size="sm"></tn-avatar-group>
          </view>
        </view>
        <view class="tn-margin-right">
          <text class='tn-color-grey tn-text-df tn-margin-right-sm'>263 look </text>
          <text class='tn-color-grey tn-text-df'> 34 love</text>
        </view>

      </view>
    </view>

    <!-- 边距间隔 -->
    <view class="tn-strip-bottom"></view>


    <!-- 悬浮按钮-->
    <view class="tn-flex tn-flex-row-between tn-footerfixed">
      <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
        <tn-button @click="onLike" backgroundColor="#00FFC6" padding="40rpx 0" width="90%" shadow fontBold>
          <text class="tn-icon-like-lack tn-padding-right-xs tn-color-black"></text>
          <text class="tn-color-black">like</text>
        </tn-button>
      </view>
      <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
        <tn-button @click="onShare" backgroundColor="#FFF00D" padding="40rpx 0" width="90%" shadow fontBold
          open-type="share">
          <text class="tn-icon-share-triangle tn-padding-right-xs tn-color-black"></text>
          <text class="tn-color-black">share</text>
        </tn-button>
      </view>
    </view>

    <view class='tn-tabbar-height'></view>

  </view>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
  name: 'TemplateNews',
  mixins: [template_page_mixin],
  data() {
    return {
      groupList: [
        { src: '/static/avatar1.png' },
        { src: '/static/avatar2.png' },
        { src: '/static/avatar.png' },
      ],
      content: [{
        userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
        userName: '可我会像',
        date: '2021年12月20日',
        color: 'red',
        label: ['小程序'],
        title: '小程序官网源码，开源欢迎白嫖嗷嗷',
        desc: '小程序前端源码开源，欢迎白嫖嗷嗷，可以的话，插件市场三连支持一下',
        mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
        viewUser: {
          latestUserAvatar: [
            { src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg' },
            { src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg' },
            { src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg' },
            { src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg' },
          ],
          viewUserCount: 567
        },
        collectionCount: 543,
        commentCount: 543,
        likeCount: 206
      },
      {
        userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
        userName: '可我会像',
        date: '2021年12月20日',
        color: 'brown',
        label: ['工具'],
        title: '小程序任意页面生成二维码',
        desc: '二维码生成器',
        mainImage: 'https://resource.tuniaokj.com/images/shop/card.jpg',
        viewUser: {
          latestUserAvatar: [
            { src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg' },
            { src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg' },
            { src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg' },
            { src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg' },
          ],
          viewUserCount: 129
        },
        collectionCount: 265,
        commentCount: 22,
        likeCount: 62
      }
      ],
    }
  },
  methods: {
    onLike() {
      uni.showToast({
        title: 'like',
        duration: 1500
      });
    },
    onShare() {
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 1,
        summary: "Explore the peak！",
        success: function (res) {
          console.log("success:" + JSON.stringify(res));
        },
        fail: function (err) {
          console.log("fail:" + JSON.stringify(err));
        }
      });
    },
    // 跳转
    tn(e) {
      uni.navigateTo({
        url: e,
      });
    },
  }
}
</script>

<style lang="scss" scoped>
/* 胶囊*/
.tn-custom-nav-bar__back {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }

  &:before {
    content: " ";
    width: 1rpx;
    height: 110%;
    position: absolute;
    top: 22.5%;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    opacity: 0.7;
    background-color: #FFFFFF;
  }
}

/* 顶部渐变*/
.tn-navbg {
  background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
  /* background: linear-gradient(-120deg,  #9A5CE5, #01BEFF, #00F5D4, #43e97b); */
  /* background: linear-gradient(-120deg,#c471f5, #ec008c, #ff4e50,#f9d423); */
  /* background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a); */
  background-size: 500% 500%;
  animation: gradientBG 15s ease infinite;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* 标题 start */
.nav_title {
  -webkit-background-clip: text;
  color: transparent;

  &--wrap {
    position: relative;
    display: flex;
    height: 120rpx;
    font-size: 42rpx;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    background-image: url(https://resource.tuniaokj.com/images/title_bg/title00.png);
    background-size: cover;
  }
}

/* 标题 end */

/* 富文本图示意 start */
.news-img {
  z-index: -1;
  padding-bottom: 40rpx;

  image {
    width: 100%;
    margin: 20rpx 0;
    // height: 3373rpx;
    // z-index: -1;
  }
}

/* 资讯主图 start*/
.image-article {
  border-radius: 8rpx;
  border: 1rpx solid #F8F7F8;
  width: 200rpx;
  height: 200rpx;
  position: relative;
}

.image-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  border-radius: 10rpx;
}

.article-shadow {
  border-radius: 15rpx;
  box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}

/* 文字截取*/
.clamp-text-1 {
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.clamp-text-2 {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 标签内容 start*/
.tn-tag-content {
  &__item {
    display: inline-block;
    line-height: 35rpx;
    padding: 7rpx 25rpx 5rpx 25rpx;

    &--prefix {
      padding-right: 10rpx;
    }
  }
}

/* 标签内容 end*/

/* 底部悬浮按钮 start*/
.tn-tabbar-height {
  min-height: 100rpx;
  height: calc(120rpx + env(safe-area-inset-bottom) / 2);
}

.tn-footerfixed {
  position: fixed;
  width: 100%;
  bottom: calc(30rpx + env(safe-area-inset-bottom));
  z-index: 1024;
  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

}

/* 底部悬浮按钮 end*/

/* 查看*/
.see {
  display: flex;
  justify-content: space-between;
  padding-top: 10rpx;
  border-radius: 6rpx;
  color: #666;
  line-height: 1.6;
}

/* 间隔线 start*/
.tn-strip-bottom {
  width: 100%;
  border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
}

/* 间隔线 end*/
</style>
